<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件运用一:</title>
  <style>
    ul{
      background:pink;
      list-style:none;
      padding:10px;
    }
    input{
      display:block;
    }
  </style>
</head>
<body>
  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>班级</li>
  </ul>
  <input class="ipt-add-content" placeholder="添加内容"/>
  <button id="btn-add-start">开头添加</button>
  <button id="btn-add-end">结尾添加</button>

  <script>
    var ct = document.querySelector(".ct")
    var btnS = document.getElementById("btn-add-start")
    var btnE = document.getElementById("btn-add-end")
    var ipt = document.querySelector(".ipt-add-content")

    ct.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
         console.log(e.target.innerText)
        }
    })

    btnE.addEventListener('click',function(){
      if(ipt.value) {
        var li = document.createElement('li')
        li.innerText = ipt.value
        ct.appendChild(li)
      }   
    })

    btnS.addEventListener('click', function(){
       if (ipt.value) {
         var li = document.createElement('li')
         li.innerText = ipt.value
         ct.insertBefore(li,ct.firstChild)
      }
    })
  </script>
</body>
</html>